<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-demo="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .router-link-active {
            color:#f00;
        }
        pre {
            font-family: sans-serif;
            font-size: 1em;
            line-height:1.5em;
        }

    </style>
</head>
<body>
<div id="app"></div>
</body>
<script src="../../../vender/vue@2.4.2.js"></script>
<script src="../../../vender/vue-router@2.7.0.js"></script>

<script>

    const router=new VueRouter({
        routes:[
            {path:'/'},
            {path:'/params/:foo/:bar'},
            {path:'/option-params/:foo?'},
            {path:'/params-with-regexp/:id(\\d+)'},
            {path:'/asterisk/*'},
            {path:'/option-group/(foo/)?bar'}
        ]
    });

    const app=new Vue({
        router,
        template:`<div>
            <h1>Route Matching</h1>
            <div>
                <span><router-link to="/">/</router-link></span> |
                <span><router-link to="/option-params">/option-params</router-link></span> |
                <span><router-link to="/option-params/foo">/option-params/foo</router-link></span> |
                <span><router-link to="/params-with-regexp/123">/params-with-regexp/123</router-link></span> |
                <span><router-link to="/params-with-regexp/abc">/params-with-regexp/abc</router-link></span> |
                <span><router-link to="/asterisk/foo">/asterisk/foo</router-link></span> |
                <span><router-link to="/asterisk/foo/bar">/asterisk/foo/bar</router-link></span> |
                <span><router-link to="/asterisk/foo/bar/abc">/asterisk/foo/bar/abc</router-link></span> |
                <span><router-link to="/option-group/bar">/option-group/bar</router-link></span> |
                <span><router-link to="/option-group/foo/bar">/option-group/foo/bar</router-link></span> |

                <span><router-link to="/xx">/xx</router-link></span>
            </div>
            <p>Route context</p>
            <pre>{{JSON.stringify($route,null,2)}}</pre>
        </div>`
    }).$mount('#app');

</script>
</html>